<template>
	<view>
		<view class="header">
			<view class="icon-view" @click="$utils.navigateBack(1)"><u-icon name="arrow-left" color="#fff" size="40"></u-icon></view>
		</view>
		<view class="activity-description" @click="$utils.navigateTo('/activity/share-description')">活动详情</view>
		<image
			mode="widthFix"
			src="/static/images/activity/share-banner.jpg"
			class="banner"
		></image>
		<view class="box" style="margin-top:-100rpx">
			<view class="title">推荐人奖励</view>
			<view class="content">
				<view class="content-title">您已经分享成功<text>{{sharenum}}</text>人</view>
				<view class="progress-view">
					<view class="progress" :style="{width:jindu+'%'}"></view>
					<!--
					<view class="progress-number" style="left:10%">
						<view class="icon"><u-icon name="checkbox-mark" size="28"></u-icon></view>
						<text>{{num1}}人</text>
					</view>
					<view class="progress-number" style="left:50%">
						<view class="icon"><u-icon name="checkbox-mark" size="28"></u-icon></view>
						<text>{{num2}}人</text>
					</view>-->
					<view class="progress-number" style="left:100%">
						<view class="icon"><u-icon name="checkbox-mark" size="28"></u-icon></view>
						<text style="margin-left: -40px;">上限{{shangxian}}人</text>
					</view>
				</view>
				<view class="receive-btn" style="font-size: 16px;" v-if="shangxian2>0" @click="getvip()">立即领取{{shangxian2}}个月超级会员</view>
				<view class="receive-btn"  style="font-size: 16px;" v-if="shangxian2==0">已领取{{yiling}}个月超级会员</view>
			</view>
		</view>
		<view class="box">
			<view class="title2">我的邀请记录</view>
			<view class="content">
				<view class="history">
					<gbro-marquee 
						broadcastType='mould' 
						:viewHeight="250" 
						direction="top" 
						:broadcastStyle='{ speed:30 }'
						:broadcastIconIsDisplay="!true" 
						:touchEvent="true"
						viewHeight="450"
						:imgdata='historyList'
						style="width: 100%"
					>
						<view v-for="(item,index) in historyList" :key="index" class="history-li">
							<image mode="widthFix" :src="item.src" class="img"></image>
							<view class="history-right">
								<text>{{item.name}}获得了超级会员</text>
								<view>{{item.time}}</view>
							</view>
						</view>
					</gbro-marquee>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="title2">官方领取记录</view>
			<view class="content">
				<view class="history2">
					<gbro-marquee 
						broadcastType='mould' 
						:viewHeight="250" 
						direction="top" 
						:broadcastStyle='{ speed:15 }'
						:broadcastIconIsDisplay="!true" 
						:touchEvent="true"
						viewHeight="450"
						:imgdata='historyList2'
						style="width: 100%"
					>
						<view v-for="(item,index) in historyList2" :key="index" class="history-li">
							<view class="one">{{item.name}}</view>
							<view class="two">{{item.time}}</view>
							<view class="three">获得成功</view>
						</view>
					</gbro-marquee>
				</view>
			</view>
		</view>
		<view class="footer-view"><view class="share-btn"  @click="uniShare">分享活动</view></view>
	</view>
</template>		
 	
<script>
	 
	import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
	    const uniShare = new UniShare();
import gbroMarquee from '@/components/Marquee.vue';
//import mixin from "@/libs/mixin.js";
export default {
	components: { gbroMarquee },
	data() {
		return {
			id: '', 
			dataObj: '',
			historyList:[],
			historyList2:[],
			sharenum:0,
			jindu:0,
			shangxian:0,
			shangxian2:0,
			getnum:0,
			fxtitle:'',
			fxdes:'',
			fximg:'',
			keling:0,
			yiling:0
		}
	},
	onBackPress({from}) {
	            //console.log(from);
	            if(from=='backbutton'){
	                this.$nextTick(function(){
	                    uniShare.hide()
	                })
	                return uniShare.isShow;
	            }
	        },
	onLoad(option) {
		if(this.$store.state.app.token){
			this.getdata()
		}else{
			let curRoute = this.$mp.page.route; //当前页面路由
			this.$utils.reLaunch('/login/phone-login',{
				sourceUrl: curRoute
			});
		}
	},
	onShow() {
	
	},
	methods: {
		getvip:function(){
			uni.request({
				url: 'http://www.txzh.com.cn/api.php?app=Default&act=getvip',  
				method: 'POST',
				data:{
					token:this.$store.state.app.token,
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded',
					'X-Requested-With': 'xmlhttprequest'
				},
				success: res => { 
					this.yiling = this.yiling + this.shangxian2;
					this.shangxian2 = 0;
					
					uni.showToast({
						title: '领取成功',
						icon:'none'
					})
				},  
				fail: () => {},  
				complete: () => {}  
			});  
			 
		},
		getdata:function(){
			uni.request({
				url: 'http://www.txzh.com.cn/api.php?app=Default&act=myshare',  
				method: 'POST', 
				data:{
					token:this.$store.state.app.token,
					//token:'2955717ed5b97e8859d10198f4950dc09c19e6fd'
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded',
					'X-Requested-With': 'xmlhttprequest'
				}, 
				success: res => {  
					this.sharenum=res.data.list.sharenum;
					this.jindu=res.data.list.jindu;
					this.shangxian=res.data.list.shangxian;
					this.shangxian2=res.data.list.keling;
					this.getnum=res.data.list.getnum;
					
					this.fxtitle=res.data.list.fxtitle;
					this.fxdes=res.data.list.fxdes;
					this.fximg=res.data.list.fximg;
					
					this.yiling=res.data.list.yiling;
					 
					// 领取记录滚动
					setTimeout(() => {
					    this.historyList = res.data.list.historyList;
						this.historyList2 = res.data.list.historyList2;
					}, 100); 
				},
				fail: () => {},  
				complete: () => {}  
			});  
		},
		uniShare() {
		                uniShare.show({
		                    content: { //公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
		                        type: 0,
		                        href: 'https://www.txzh.com.cn/?act=share&uid=13',
		                        title: this.fxtitle,
		                        summary: this.fxdes,
		                        imageUrl: this.fximg
		                    },
		                    menus: [{
		                            "img": "/static/app-plus/sharemenu/wechatfriend.png",
		                            "text": "微信好友",
		                            "share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
		                                "provider": "weixin",
		                                "scene": "WXSceneSession"
		                            }
		                        },
		                        {
		                            "img": "/static/app-plus/sharemenu/wechatmoments.png",
		                            "text": "微信朋友圈",
		                            "share": {
		                                "provider": "weixin",
		                                "scene": "WXSceneTimeline"
		                            }
		                        },
		                       
		                        {
		                            "img": "/static/app-plus/sharemenu/copyurl.png",
		                            "text": "复制",
		                            "share": "copyurl"
		                        },
		                        {
		                            "img": "/static/app-plus/sharemenu/more.png",
		                            "text": "更多",
		                            "share": "shareSystem"
		                        }
		                    ],
		                    cancelText: "取消分享",
		                }, e => { //callback
		                    //console.log(uniShare.isShow);
		                    //console.log(e);
		                })
		            }
	}
}
</script>

<style>
page{
	background: #fe5140;
}
</style>
<style lang="scss" scoped>
.header{
	position:absolute;
	top:65rpx;
	left:0;
	z-index: 1;
	width:100%;
	padding:0 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	.icon-view{
		width:65rpx;
		height:65rpx;
		background: rgba(0,0,0,.2);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 40rpx;
	}
}
.banner{
	width:100%;
}
.activity-description{
	position:absolute;
	top:75rpx;
	right:0;
	z-index: 10;
	background: rgba(0,0,0,.3);
	text-align: center;
	padding:0 1.5em;
	font-size:22rpx;
	color:#fff;
	line-height: 2em;
	border-radius: 20rpx 0 0 20rpx;
}
.receive-btn{
	width: 380rpx;
	height: 110rpx;
	line-height: 110rpx;
	margin:0 auto;
	background: url(../../static/images/activity/share-btn.png) no-repeat;
	background-size: 100% 100%;
	font-size:42rpx;
	text-align: center;
	color:#a72312;
	font-weight: bold;
}
.box{
	width:94%;
	position: relative;
	margin:40rpx auto 0;
	background: #fff2de;
	padding:50rpx 40rpx;
	border-radius: 20rpx;
	.title{
		height:110rpx;
		line-height:110rpx;
		margin-top:-70rpx;
		background: url(../../static/images/activity/share-title.png) no-repeat center top;
		background-size: auto 100%;
		font-size:42rpx;
		text-align: center;
		color:#fff;
		font-weight: bold;
	}
	.content-title{
		margin-top:30rpx;
		text-align:center;
		font-size:32rpx;
		text{
			font-size:44rpx;
			color:#ff3541;
			margin:0 10rpx;
			font-weight: bold;
		}
	}
	.progress-view{
		position:relative;
		width:100%;
		background:#a63e15;
		border-radius: 13rpx;
		margin:40rpx auto 80rpx;
		.progress{
			height:25rpx;
			background:#efcb43;
			border-radius: 13rpx;
		}
		.progress-number{
			position:absolute;
			top:-8rpx;
			transform: translateX(-50%);
			text-align: center;
			color: #ff3541;
			.icon{
				width:40rpx;
				height:40rpx;
				color:#fff;
				background: #ff3541;
				border-radius: 50%;
				margin: 0 auto;
			}
			text{
				display: block;
				white-space: nowrap;
				font-size:20rpx;
			}
		}
	}
	.title2{
		height:90rpx;
		line-height:90rpx;
		background: url(../../static/images/activity/share-title2.png) no-repeat center top;
		background-size: auto 100%;
		font-size:42rpx;
		text-align: center;
		color:#fff;
		font-weight: bold;
	}
	.history{
		margin-top:30rpx;
		overflow:hidden;
		.history-li{
			background: linear-gradient(to right,#fd8524,#fa4834);
			overflow: hidden;
			padding: 20rpx 35rpx;
			color:#fff;
			border-radius: 20rpx;
			margin-top:15rpx;
			.img{
				float:left;
				width:110rpx;
				border-radius: 50%;
			}
			.history-right{
				margin-left:130rpx;
				line-height: 2em;
				font-size: 26rpx;
				text{
					font-size: 34rpx;
				}
			}
		}
	}
	.history2{
		margin-top:30rpx;
		overflow:hidden;
		.history-li{
			display: flex;
			background: #fff;
			border-radius: 10rpx;
			margin-top:10rpx;
			padding:20rpx 30rpx;
			color: #966262;
			.one{
				width:33%;
				font-size:32rpx;
			}
			.two{
				width:42%;
			}
			.three{
				width:25%;
				text-align: right;
			}
		}
	}
}
.footer-view{
	position: fixed;
	bottom:0;
	left:0;
	width:100%;
	text-align: center;
	padding:20rpx 65rpx;
	background:#fe5140;
	.share-btn{
		width:auto;
		line-height:86rpx;
		background:#ffab19;
		font-size:40rpx;
	}
}
</style>